<ng-container *ngIf="isNewStyle; else elseRankTemplate">
  <div class="newRankingDiv" [ngStyle]="tagData.data?.cssStyle|styleFilter">
    <ng-container *ngFor="let item of tagData.data.data;let i = index">
      <div class="rankItem">
        <div class="rankLeftBox">
          <span class="rankIndex" [ngClass]="{'champion': i+1 ===1,'silver':i+1 ===2,'third':i+1 ===3}">{{i+1}}</span>
          <div class="avatarBox">
            <img *ngIf="i+1===1" class="avatarLeftTop"
              src="https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_1660642024322566bfa67a6b0f0a846a865fe39a7028f.png" />
            <img *ngIf="i+1===2" class="avatarLeftTop"
              src="https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_16606420406970a572477203d8f4f7ec67dbda0450461.png" />
            <img *ngIf="i+1===3" class="avatarLeftTop"
              src="https://zeno-img.oss-cn-shenzhen.aliyuncs.com/file_16606420509681a10710f4c5ef20828aa3f80884fb2a9.png" />
            <img class="rankAvatar"
              [ngClass]="{'avatorChampion': i+1 ===1,'avatorSilver':i+1 ===2,'avatorThird':i+1 ===3}"
              src="{{item.imageUrl}}" onerror="this.src='assets/img/headportraitstaff.png'">
          </div>
          <span class="rankNickName" *ngIf="item.label" [ngStyle]="item.labelCssStyle|styleFilter">{{item.label}}</span>
        </div>
        <div class="rankRightBox">
          <span class="rankNumber" *ngIf="item.number"
            [ngClass]="{'champion': i+1 ===1,'silver':i+1 ===2,'third':i+1 ===3}"
            [ngStyle]="item.numberCssStyle|styleFilter">{{item.number}}</span>
          <span class="rankUnit" *ngIf="item.number"
            [ngClass]="{'champion': i+1 ===1,'silver':i+1 ===2,'third':i+1 ===3}"
            [ngStyle]="item.unitCssStyle|styleFilter">元</span>
        </div>
      </div>
    </ng-container>
  </div>
</ng-container>
<ng-template #elseRankTemplate>
  <div class="rankingDiv">
    <div class="title">
      <span class="rankingTitle">{{tagData.data.title}}</span>
      <!-- <div class="region">
        <span *ngFor="let item of tagData.data.buttonList">{{item.label}}</span>
      </div> -->
    </div>
    <div class="state">
      <span *ngFor="let item of tagData.data.subButtonList"><span class="stateButton" appDebounceClick (debounceClick)="checked(item)"
          [ngClass]="{'select' : item.checked}">{{item.label}}</span></span>
    </div>
    <div class="rankingPeople">
      <div [ngClass]="{'peopleStyle': i === 0, 'marginStyle' : i!== 2, 'left' : i === 1, 'right' : i === 2 }"
        class="backgroundStyle" *ngFor="let item of tagData.data.data;let i = index">
        <div class="fristImg" *ngIf="i === 0">
          <img src="assets/img/home_icon_champion@3x.png">
          <img class="imgMiddle" src="{{item.imageUrl}}" onerror="this.src='assets/img/headportraitstaff.png'">
        </div>
        <img class="otherImg" [ngClass]="{'oneImg' : i === 1}" *ngIf="i !== 0" src="{{item.imageUrl}}"
          onerror="this.src='assets/img/headportraitstaff.png'">
        <p class="rankingName" [ngClass]="{'fristName' : i === 0}">{{item.label}}</p>
        <p class="ranking"><span class="number" [ngStyle]="item?.cssStyle|styleFilter">{{item.number}}</span><span
            class="rankingUnit">{{item.unit}}</span></p>
      </div>
    </div>
  </div>
</ng-template>